<!--
  智慧社区管理系统 - 维修工单
  @author Wu.Liang
  @date 2024-01-01
-->
<template>
    <div class="property-repair">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>维修工单</span>
                    <el-button type="primary" @click="handleAdd">新增工单</el-button>
                </div>
            </template>
            
            <el-table :data="repairList" v-loading="loading" style="width: 100%">
                <el-table-column prop="orderNo" label="工单号" />
                <el-table-column prop="title" label="维修标题" />
                <el-table-column prop="location" label="维修位置" />
                <el-table-column prop="reporter" label="报修人" />
                <el-table-column prop="priority" label="优先级" />
                <el-table-column prop="status" label="状态" />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" @click="handleDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const loading = ref(false)
const repairList = ref([])

const handleAdd = () => {
    // 新增维修工单
}

const handleEdit = (row: any) => {
    // 编辑维修工单
}

const handleDetail = (row: any) => {
    // 查看维修工单详情
}

onMounted(() => {
    // 加载维修工单列表
})
</script>

<style scoped>
.property-repair {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style> 